
import Addfilm from './addFilm.js';
import UpdateFilm from './updateFilm.js';


let $ = layui.$;
export default class Films {
    constructor() {
        this.render()
        this.handel()
    }
    render() {
        let template = `
        <h1 style="padding: 15px;">电影列表</h1>
        <div style="display:flex">
            <div class="layui-btn-group">
            <!-- 添加按钮 -->
            <button type="button" class="layui-btn" id="addBtn">新增</button>
            </div>
            <!-- 查询按钮 -->
        <form class="layui-form layui-form-pane" action="" lay-filter="searchForm">
            <div class="layui-form-item">
                <label class="layui-form-label">search</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-search="" style="width: 50px;">
                        <option value="">全部</option>
                        <option value="name">电影中文名</option>
                        <option value="ename">英文名</option>
                        <option value="type">类型</option>
                        <option value="area">上映地区</option>
                        <option value="time">电影时长</option>
                        <option value="upDate">上映时间</option>
                        <option value="year">年代</option>
                        <option value="score">评分</option>
                        <option value="count">票房</option>
                        <option value="want">想看人数</option>
                        <option value="director">导演</option>
                        <option value="actor">演员</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                <input type="text" 
                name="value" required 
                lay-verify="required"
                placeholder="请输入标题" 
                autocomplete="off" 
                class="layui-input"> 
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="searchBtn">搜索</button>
                </div>
            </div>
        </form>
        </div>

    
        <!-- 电影信息表格 -->
        <table id="filmsTable" lay-filter="filmsTable"></table>
        <!-- 表格里的操作按钮 -->
          <script type="text/html" id="optBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script> 

          <!-- 添加电影的弹出层 -->
          <script type="text/html" id='addFilmTemplate'></script> 
          <!-- 修改电影的弹出层 -->      
          <script type="text/html" id='updateFilmTemplate'></script>  
        `
        $('#content').html(template)
    };
    handel() {
        var table = layui.table;
        const $ = layui.$;
        const form = layui.form;
        form.render()//防止表格出现没渲染的情况
        //渲染电影表格
        table.render({
            elem: '#filmsTable'
            , url: '/api/films' //数据接口
            // , width: 1250
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res);
                return {
                    "code": 0, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , page: {
                limits: [3, 5, 8, 10],
                limit: 5
            }//自定义分页
            , cols: [[ //表头
                { field: 'name', title: '电影名', width: 150, fixed: 'left' }
                , { field: 'ename', title: '英文名', width: 150 }
                , { field: 'type', title: '电影类型', sort: true, width: 150 }
                , { field: 'area', title: '上映地区', width: 150 }
                , { field: 'time', title: '电影时长', sort: true, width: 150 }
                , { field: 'upDate', title: '上映时间', width: 150 }
                , { field: 'year', title: '年代', sort: true, width: 150 }
                , { field: 'score', title: '电影评分', sort: true, width: 150 }
                , { field: 'count', title: '电影票房', sort: true, width: 150 }
                , { field: 'want', title: '想看人数', sort: true, width: 150 }
                , { field: 'intro', title: '剧情简介', width: 150 }
                , {
                    field: 'director', title: '导演', width: 150, templet: function (d) {
                        let dirArr = [];//放遍历出来的人名
                        for (let i = 0; i < d.director.length; i++) {
                            d.director ? dirArr.push(d.director[i].name) : ''

                        }
                        return dirArr.join(',');
                    }
                }
                , {
                    field: 'actor', title: '演员', width: 150, templet: function (d) {
                        let acArr = [];//放遍历出来的人名
                        for (let i = 0; i < d.actor.length; i++) {
                            d.actor ? acArr.push(d.actor[i].name) : ''
                        }
                        return acArr.join(',');
                    }
                }
                , {
                    filed: 'status', title: '电影状态', width: 100, templet: function (d) {
                        let value = d.status;
                        switch (value) {
                            case 0:
                                return '';
                            case 1:
                                return '热映';
                            case 2:
                                return '热播'
                            case 3:
                                return '待映'

                        }
                    }
                }
                , { fixed: 'right', title: '操作', toolbar: '#optBar', width: 150 }
            ]]

        });
        $('#addBtn').click(function () {
            new Addfilm();
        })

        //表格里的操作按钮
        table.on('tool(filmsTable)', function (obj) {
            var data = obj.data;
            //删除学生
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'delete',
                        url: '/api/films/' + data._id,//根据ID直接删除
                        success(res) {
                            table.reload('filmsTable', { page: { curr: 1 } });//跳转到第一页渲染
                            layer.close(index);

                        }
                    })

                });
            } else if (obj.event === 'edit') {
                //修改电影
                new UpdateFilm(data);
            }
        });

        //根据条件查询电影
        $('#searchBtn').click(function () {
            let type = form.val('searchForm').type;
            let value = form.val('searchForm').value;
            // console.log(form.val('searchForm'));
            table.reload('filmsTable', {

                where: form.val('searchForm'),
                page: {
                    curr: 1
                }
            })


        })
    }
}